<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>购物车</title>
        <link href="../css/shopcar.css" rel="stylesheet">

    </head>
    <body>
<div class="bg">
    <!--最上面的导航-->
    <div class="shortcut-2014">
        <div class="w">
            <ul class="fr">
                <li class="fore1 fore1zidingyi" id="ttbar-login">
                    <a href="" class="link-login">你好，请登录</a>
                    &nbsp;&nbsp;
                    <a href="" class="link-regist style-red">免费注册</a>
                </li>
                <!--<li class="spacer"></li>-->
                <li class="fore2">
                    <div class="dt">
                        <a href="" target="_blank">我的订单</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div id="o-header-2013">
        <div id="header-2013" style="display:none;"></div>
    </div>

    <!-- 下面的带 logo 的部分 -->
    <div id="nav">
        <div class="w">

            <!-- logo 部分 -->
            <div class="logo">
                <a href="" class="fore11" target="_blank"></a>
                <a href="" class="fore22" target="_blank">我的树懒</a>
                <a href="" class="fore33" target="_blank">返回树懒首页</a>
            </div>


        </div>
    </div>
        <div class="main">
            <!--1. header ： logo+ 搜索-->
            <div class="header">
                <!--2. 全部商品标题-->
                <div class="cart-filter-bar">
                    <div class="switch-cart">
                        <span class="cart-title">全部商品</span>
                        <span class="cart-pro-number"></span>
                    </div>

                <div class="search-right">

                        <form action="" class="search-form">
                            <input type="text" class="keyword" placeholder="搜索商品">
                            <a href=""  class="search-btn">搜索</a>
                        </form>

                </div>
            </div>





            </div>

            <!--3. 操作的小标题-->
            <div class="cart-head">
                    <div class="head-checkbox">
                        <input type="checkbox">
                        <span>全选</span>
                    </div>

                    <div class="head-goods">商品 </div>
                    <div class="head-props">  </div>
                    <div class="head-right">单价 </div>
                    <div class="head-right">数量 </div>
                    <div class="head-right">小计 </div>
                    <div class="head-right">操作 </div>
            </div>


            <!--4. 商品列表-->
            <div class="pro-list">
                <ul>
                    <li>
                        <!--店铺名称-->
                        <div class="shop-name">

                            <span>apple旗舰店</span>
                        </div>

                        <!--商品详情： 左边（图片名称） + 右边（价格操作）-->
                        <div class="goods-detail">
                            <!-- 左边（图片名称）-->
                            <div class="goods-left">
                                <input type="checkbox" class="checkbox">
                                <a href="" class="goods-img">
                                    <img src="../images/shouji123.jpg">
                                </a>
                                <a href="" class="goods-name">
                                    Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机

                                </a>
                            </div>


                            <!-- 右边（价格操作）-->
                            <div class="goods-right">
                                <div class="cell unit-price">
                                    <span>￥</span>
                                    <span>5999</span>
                                </div>
                                <div class="cell cart-quality">
                                     <button>-</button>
                                     <input type="text" value="1">
                                     <button>+</button>
                                </div>

                                <div class="cell cart-xiaoji">
                                    <span>￥</span>
                                    <span>5999</span>
                                 </div>
                                <div class="cell cart-delete">
                                    <a href="">删除</a>
                                </div>
                                <div class="daohuo">
                                    <a href="">到货通知</a>
                                </div>

                            </div>
                        </div>

                    </li> <!--                  -->
                    <li>
                        <!--店铺名称-->
                        <div class="shop-name">
                            <span>apple旗舰店</span>
                        </div>

                        <!--商品详情： 左边（图片名称） + 右边（价格操作）-->
                        <div class="goods-detail">
                            <!-- 左边（图片名称）-->
                            <div class="goods-left">
                                <input type="checkbox" class="checkbox">
                                <a href="" class="goods-img">
                                    <img src="../images/shouji123.jpg">
                                </a>
                                <a href="" class="goods-name">
                                    Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机

                                </a>
                            </div>


                            <!-- 右边（价格操作）-->
                            <div class="goods-right">
                                <div class="cell unit-price">
                                    <span>￥</span>
                                    <span>5999</span>
                                </div>
                                <div class="cell cart-quality">
                                    <button>-</button>
                                    <input type="text" value="1">
                                    <button>+</button>
                                </div>

                                <div class="cell cart-xiaoji">
                                    <span>￥</span>
                                    <span>5999</span>
                                </div>
                                <div class="cell cart-delete">
                                    <a href="">删除</a>
                                </div>
                                <div class="daohuo">
                                    <a href="">到货通知</a>
                                </div>

                            </div>
                        </div>

                    </li><!------------------>

                </ul>
            </div>



            <!--5. 底部结算条-->
            <div class="cart-floatbar">
                <div class="jiesuan-left">
                    <input type="checkbox">
                    <span>全选</span>
                    <a href="">删除选中的商品</a>
                    <a href="">移除购物车</a>
                </div>


                <div class="jiesuan-right">
                    <div class="selected-count">
                        <span class="selected-count-label">已选中</span>
                        <span class="number">2</span>
                        <span class="selected-count-label">件商品</span>
                    </div>

                    <div class="zongjia">
                        <span class="selected-count-label">总价:</span>
                        <span  class="zongjia-price">￥</span>
                        <span  class="zongjia-price">11998</span>

                    </div>
                    <a href="" class="jiesuan-btn">去结算</a>

                </div>
            </div>
        </div>
    <script src="../js/js_购物车.js"></script>

</div>
    </body>
</html>